<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>VUE-Axios练习</title>
</head>
<body>
<!-- 定义VUE根标签 -->
<div id="app">
    <div align="center">
    <h1 align="center">用户新增</h1>
        名称：<input type="text" v-model.trim="addUser.name">
        年龄：<input type="text" v-model.number="addUser.age">
        性别：<input type="text" v-model.trim="addUser.sex">
        <button @click="addUserMe">新增</button>

    </div>
    <table id="tab1" border="1px" align="center" width="80%">
        <tr>
            <td colspan="5" align="center"><h1>用户列表</h1></td>
        </tr>
        <tr>
            <td align="center">编号</td>
            <td align="center">姓名</td>
            <td align="center">年龄</td>
            <td align="center">性别</td>
            <td align="center">操作</td>
        </tr>
    </table>
</div>

<!-- 1.引入VUE.js -->
<script src="../js/vue.js"></script>
<!-- 2.引入Axios.js -->
<script src="../js/axios.js"></script>

<!--
        需求分析:
            1.当用户打开页面时就应该发起Ajax请求获取userList数据.
            将userList数据 在页面
            需求分析2：用户数据入库操作
            1.在页面中准备用户新增文本框/按钮
 -->
<script>
    //设定axios请求前缀
    axios.defaults.baseURL = "http://localhost:8090"
    const app = new Vue({
        el: "#app",
        data: {
            // 定义集合数据
            userList:[]
        },
        methods: {
            //1.定义getuserList方法 获取后台服务器数据
            async getUserList(){
                let{data: result} = await axios.get("/vue/getUserList")
                //ajax调用
                console.log(result)
            }
        },
        mounted(){
            //console.log("vue对象实例化成功!!!!")
            //初始化时调用getUserList()
            this.getUserList()
        }
    })
</script>
</body>
</html>
